import React, { useState } from 'react'
import type { RadioChangeEvent } from 'antd';
import { Button, Checkbox, Form, Input, Radio, message } from 'antd';
import Styles from '../../assets/styles/login.module.less'
import ComImg from '../UpdataImg/ComImg';
import { shopTel, shopName, addShop } from '../../apis/apply';
import { useNavigate } from 'react-router';

type Props = {
    getIsCom: any
}

const ComSettle = (props: Props) => {
    const [value, setValue] = useState(0);
    const navigate = useNavigate()
    // const [idCardImg,setIdCardImg] =useState('')
    // const [licenceImg,setLicenceImg] =useState('')
    const [form] = Form.useForm()
    const [] = useState('')
    const onFinish = async (values: any) => {
        console.log('Success:', values.tel);
        const telAuth = await shopTel(values.tel)
        console.log('telAuth', telAuth);
        console.log('Success1:', values.shopName);
        const shopnameAuth = await shopName(values.shopName)
        console.log('shopnameAuth', shopnameAuth);

        //    if(telAuth.data.result===true && shopnameAuth.data.result===true){
        //       const res = await addShop(values)
        //       console.log('res',res);
        //       if(res.data.result===true){
        //         message.success("申请成功！")
        //         navigate("/")
        //         // form.setFieldsValue({
        //         //     shopName:'',
        //         //     tel:'',
        //         //     address:'',
        //         //     managerName:'',
        //         //     idCard:'',
        //         //     idCardImg:'',
        //         //     licenceNo:'',
        //         //     licenceImg:''
        //         // })
        //         form.resetFields()
        //       }
        //    }else{
        //       message.error("手机号格式不对或者商品名已被注册！")
        //    }

        if (telAuth.data.result === true && telAuth.data.boo === true) {
            if (shopnameAuth.data.result === true && shopnameAuth.data.boo === true) {
                const res = await addShop(values)
                console.log('res', res);
                if (res.data.result === true) {
                    message.success("申请成功！")
                    form.resetFields()
                }else{
                    message.success("申请失败！")
                }
            } else {
                message.error("商铺名已被注册！")
            }
        } else {
            message.error("手机号已被注册！")
        }

    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    //切换
    const loginBtn = () => {
        props.getIsCom(true)
    }

    //单选选择
    const onChange = (e: RadioChangeEvent) => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };


    const getIdCardImg = (val: string) => {
        console.log(val);
        form.setFieldsValue({
            idCardImg: val
        })
    }

    const getLicenceImg = (val: string) => {
        console.log(val);
        form.setFieldsValue({
            licenceImg: val
        })
    }

    return (
        <div className={Styles.cont}>
            <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                initialValues={{ type: '0' }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
                style={{ width: '400px', margin: '0px auto' }}
                form={form}
            >

                <Form.Item
                    label="店铺类型"
                    name="type"
                    rules={[{ required: true, message: '请选择店铺类型!' }]}
                >
                    <Radio.Group onChange={onChange} value={value}>
                        <Radio value='0'>充电桩</Radio>
                        <Radio value='1'>其他</Radio>
                    </Radio.Group>
                </Form.Item>

                <Form.Item
                    label="店铺名称"
                    name="shopName"
                    rules={[{ required: true, message: '请输入店铺名称!' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="手机号"
                    name="tel"
                    rules={[{ required: true, message: '请输入手机号!' }]}
                >
                    <Input />
                </Form.Item>


                <Form.Item
                    label="店铺地址"
                    name="address"
                    rules={[{ required: true, message: '请输入店铺地址!' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="注册人姓名"
                    name="managerName"
                    rules={[{ required: true, message: '请输入注册人姓名!' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="身份证号"
                    name="idCard"
                    rules={[{ required: true, message: '请输入身份证号!' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="身份证图片"
                    name="idCardImg"
                    rules={[{ required: true, message: '请上传身份证图片!' }]}
                >
                    <ComImg getImgSrc={getIdCardImg}></ComImg>
                </Form.Item>

                <Form.Item
                    label="营业执照编号"
                    name="licenceNo"
                    rules={[{ required: true, message: '请输入营业执照编号!' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="营业执照照片"
                    name="licenceImg"
                    rules={[{ required: true, message: '请上传营业执照照片!' }]}
                >
                    <ComImg getImgSrc={getLicenceImg}></ComImg>
                </Form.Item>


                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit" style={{ marginRight: '50px' }}>
                        立即申请
                    </Button>
                    <a href="#" onClick={loginBtn}>使用已有账户登录</a>
                </Form.Item>
            </Form>
        </div>
    )
}

export default ComSettle